<template>
  <!-- <virtual-list :listData="data" :itemSize="100"> </virtual-list> -->
  <!-- <infinite-list :list="data"></infinite-list> -->
  <infinite-view :list="data" class="infinite"></infinite-view>
</template>

<script>
// @ is an alias to /src
// import VirtualList from './VirtualList.vue'
// import InfiniteList from './InfiniteList/index'
import InfiniteView from './InfiniteView/index'
export default {
  name: 'Home',
  components: {
    // VirtualList,
    // InfiniteList,
    InfiniteView,
  },
  data() {
    let d = []
    let str =
      '我饿金融危机人为课件荣家湾我看兼容我为今日为空耳机孔我耳机科沃尔仅我可见尾款人就晚了可就我看了人家我看了人家玩了客家人尾款人来接我立刻让我来客人'
    for (let i = 0; i < 100000; i++) {
      // d.push({ id: i, value: i })
      d.push({
        id: i,
        msg: `<span style="color:red">${i}</span>${str.slice(
          0,
          Math.floor(Math.max(Math.random() * str.length, 5))
        )}`,
        img: 'https://img01.yzcdn.cn/vant/cat.jpeg',
        imgW: Math.ceil(Math.random() * 10) + 90,
        imgH: Math.ceil(Math.random() * 60) + 10,
      })
    }
    return {
      data: d,
    }
  },
}
</script>

<style lang="scss" scope>
.infinite {
  height: 100vh;
}
</style>
